<template>
    <div class="photo-info">
        <!--顶部 -->
        <div class="top">
            <h3 class="title">{{item.title}}</h3>
            <div class="content">
                <span>格言：{{item.motto}}</span>
                <span>点击：{{item.click}}</span>
            </div>
        </div>

        <hr/>

        <!--中间 -->
        <div class="small-image">
            <!--<vue-preview :slides="thumbs" @close="handleClose"></vue-preview>-->
            <img v-gallery="'group1'" v-for="(item, index) in thumbs" :data-index="index" :src="item.src" :key="item.src">
            <!--<img class="preview-img"-->
                 <!--v-for="(item, index) in thumbs"-->
                 <!--:src="item.src" height="100"-->
                 <!--@click="$preview.open(index, list)"-->
                 <!--:key="index">-->
        </div>

        <div v-html="item.content"></div>

        <!-- 底部 -->
        <comment-info></comment-info>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui'
    import CommentInfo from '../subComponents/commentInfo.vue'

    export default {
        data(){
            return {
                id:this.$route.params.id,
                item:null,
                thumbs:null
            }
        },

        created(){
            this.getPhotoInfo();
            this.getThumbsInfo();
        },

        methods:{
            getPhotoInfo(){
                this.$http.get('http://rap2api.taobao.org/app/mock/149003/home/photoinfo/' + this.id)
                    .then((resultObj)=>{
                        var result = resultObj.body;
                        if (parseInt(result.status) === 200) {
                            this.item = result.list[0];

                        } else {
                            Toast("请求失败")
                        }
                    })
            },
            getThumbsInfo(){
                this.$http.get('http://rap2api.taobao.org/app/mock/149003/home/thumbs/' + this.id)
                    .then((resultObj)=>{
                        var result = resultObj.body;
                        if (parseInt(result.status) === 200) {
                            result.list.forEach((item)=>{
                                item.w=600;
                                item.h = 400;
                                item.msrc=item.src;
                                item.alt='提示信息';
                            })
                            this.thumbs = result.list;
                        } else {
                            Toast('请求错误')
                        }
                    })
            },
            handleClose(){
                console.log('图片浏览关闭。。。');
            }
        },
        components:{
          CommentInfo,
        },
        params:['id']
    }
</script>

<style lang="scss">
    .photo-info {
        padding: 0 5px;
        .top {
            h3 {
                color: #8a6de9;
                font-size: 16px;
                text-align: center;
                padding: 10px 0;
            }
            .content {
                display: flex;
                justify-content: space-between;
                font-size: 13px;
            }
        }
        .small-image {
            img {
                margin: 10px;
                box-shadow: 0 0 9px #999;
                width: 100px;
                height: 100px;
                object-fit: cover;
            }
        }
    }
</style>